 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
    <input id="chat-message-input" type="text" size="100"><br>
    <input id="chat-message-submit" type="button" value="Send">
    {{ room_name|json_script:"room-name" }}

<script>
        // 获取房间名
        const roomName = JSON.parse(document.getElementById('room-name').textContent);

        // 根据roomName拼接websocket请求地址，建立长连接
        //  请求url地址为/ws/chat/<room_name>/
        const wss_protocol = (window.location.protocol == 'https:') ? 'wss://': 'ws://';
        const chatSocket = new WebSocket(
             wss_protocol + window.location.host + '/ws/chat/'  + roomName + '/'
             );

        // 建立websocket连接时触发此方法，展示欢迎提示
        chatSocket.onopen = function(e) {
             document.querySelector('#chat-log').value += ('[公告]欢迎来到' + roomName + '讨论群。请文明发言!\n')
         }

        // 从后台接收到数据时触发此方法
        // 接收到后台数据后对其解析，并加入到聊天记录chat-log
         chatSocket.onmessage = function(e) {
             const data = JSON.parse(e.data);
             document.querySelector('#chat-log').value += (data.message + '\n');
         };

         // websocket连接断开时触发此方法
         chatSocket.onclose = function(e) {
             console.error('Chat socket closed unexpectedly');
         };

         document.querySelector('#chat-message-input').focus();
         document.querySelector('#chat-message-input').onkeyup = function(e) {
             if (e.keyCode === 13) {  // enter, return
                 document.querySelector('#chat-message-submit').click();
             }
         };

         // 每当点击发送消息按钮，通过websocket的send方法向后台发送信息。
         document.querySelector('#chat-message-submit').onclick = function(e) {
             const messageInputDom = document.querySelector('#chat-message-input');
             const message = messageInputDom.value;

             //注意这里:先把文本数据转成json格式,然后调用send方法发送。
             chatSocket.send(JSON.stringify({
                 'message': message
             }));
             messageInputDom.value = '';
         };
     </script>
</body>
</html>